<template>
  <view class="jg-12123">
    <view class="g-12123-title">
      交管<text class="spe">12123</text>
    </view>
    <view class="jg-row">
      <view class="jg-guide">
        <image class="img" :src="examTheoryExamImages.jgGuide" mode="widthFix"></image>
        <view class="text">
          交管12123使用指南
        </view>
      </view>
      <view class="jg-ks">
        <navigator
          url="/pages/webView/webView?htmlPageTitle=考试预约指南&htmPageUrl=https://media.jiabl.net.cn/h5/122score/result.html"
          hover-class="none">
          <view class="jg-ks-item jg-pre">
            <view class="text">
              考试预约指南
            </view>
            <image class="img" :src="examTheoryExamImages.jgPre" mode="widthFix"></image>
          </view>
        </navigator>
        <navigator
          :url="`/pages/webView/webView?htmlPageTitle=如何查成绩&htmPageUrl=${encodeURIComponent('https://media.jiabl.net.cn/h5/122score/result.html?type=ccj')}`"
          hover-class="none">
          <view class="jg-ks-item jg-select">
            <view class="text">
              如何查成绩
            </view>
            <image class="img" :src="examTheoryExamImages.jgSelect" mode="widthFix">
            </image>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script type="ts" setup>
  import { useExamTheoryExamImages } from '@/static/images'
  const examTheoryExamImages = useExamTheoryExamImages()
</script>

<style lang="scss" scoped>
  .jg-12123 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60rpx 20rpx;

    .g-12123-title {
      font-size: 36rpx;
      color: #1a191f;
      font-weight: bold;

      .spe {
        color: #27c463;
      }
    }

    .jg-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 40rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: rgb(26, 25, 31);

      .jg-guide {
        width: 320rpx;
        height: 320rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(247, 246, 249);
        border-radius: 16rpx;

        .img {
          width: 230rpx;
          height: 178rpx;
          margin-bottom: 20rpx;
        }
      }

      .jg-ks {
        width: 320rpx;
        height: 320rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .jg-ks-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 149rpx;
          background-color: rgb(247, 246, 249);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 0 20rpx;
        }

        .jg-pre .img {
          width: 97rpx;
          height: 71rpx;
        }

        .jg-select .img {
          width: 105rpx;
          height: 75rpx;
        }

      }
    }
  }

</style>
